<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-27 19:39:40
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-31 15:49:46
 * @FilePath: \实训二PC\vue-project\src\views\home\HomePage\index.vue
 * @Description: 
 * qq1908552310
-->

<template>
    <div class="home_container">
        <div class="home_header">
            <div id="headerId" :class="item.style" v-for="(item, index) in header_menu.list" :key="index">
                <div class="header_top">
                    <div class="imgDiv">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="titleDiv">
                        <div class="priceDiv">
                            <span class="money">￥</span>
                            <span class="price">{{ item.price }} &nbsp;</span>
                        </div>
                        <div class="day_number">
                            {{ item.title }}
                        </div>
                    </div>
                </div>
                <div class="header_desc">
                    <span>日同比</span><span class="desc"> {{ item.desc }}</span><img :src="item.icon" alt="">
                </div>
            </div>
        </div>
        <div class="home_main">
            <div class="Linechart-container">
                <LineBar></LineBar>
            </div>
            <div class="Ychart">
                <RightLine></RightLine>
            </div>
        </div>
        <div class="home_footer">
            <div class="footer_left">
                <PieLeft></PieLeft>
            </div>
            <div class="footer_content">
                <PieContent></PieContent>
            </div>
            <div class="footer_right">
                <PieRight></PieRight>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import LineBar from "@/components/LineBar.vue"
import RightLine from "@/components/RightLine.vue"
import PieLeft from "@/components/PieLeft.vue";
import PieContent from "@/components/PieContent.vue";
import PieRight from '@/components/PieRight.vue';
import { ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';
const header_menu = reactive({
    list: [
        {
            image: "../../../../public/Icons/png/今日已售(元).png",
            price: "120",
            title: "今日已售(元)",
            desc: "增高20%",
            icon: "../../../../public/Icons/png/上升.png",
            style: "list_style1"
        },
        {
            image: "../../../../public/Icons/png/今日订票数.png",
            price: "208",
            title: "今日已售订单数",
            desc: "增高20%",
            icon: "../../../../public/Icons/png/上升.png",
            style: "list_style2"
        },
        {
            image: "../../../../public/Icons/png/今日支付订单数.png",
            price: "328",
            title: "今日支付订单数",
            desc: "增高20%",
            icon: "../../../../public/Icons/png/上升.png",
            style: "list_style3"
        },
        {
            image: "../../../../public/Icons/png/今日退票数.png",
            price: "50",
            title: "今日退票数",
            desc: "增高20%",
            icon: "../../../../public/Icons/png/下降.png",
            style: "list_style4"
        }
    ]
})



</script>

<style scoped lang="scss">
.home_container {
    width: 100%;
    height: 100%;

    .home_header {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-between;

        #headerId {
            width: 24%;
            height: 100%;
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;

            .header_top {
                width: 100%;
                height: 64%;
                display: flex;
                border-bottom: solid 1px #d8dbe2;
                margin-top: 10px;

                .imgDiv {
                    width: 40%;

                    img {
                        width: 55px;
                        height: 55px;
                    }
                }

                .titleDiv {
                    width: 60%;
                    text-align: right;

                    .priceDiv {
                        height: 30px;

                        .price {
                            font-size: 28px;
                            line-height: 32px;
                        }
                    }

                    .day_number {
                        margin-top: 7px;
                    }
                }
            }

            .header_desc {
                width: 100%;
                height: 30px;
                display: flex;
                align-content: center;
                align-items: center;

                .desc {
                    margin: 0 5px;
                }

                img {
                    width: 17px;
                    height: 17px;
                }
            }
        }

        .list_style1 {
            .priceDiv {
                color: #3BC9A9;
            }

            .desc {
                color: #3BC9A9;
            }
        }

        .list_style2 {
            .priceDiv {
                color: #679CF6;
            }

            .desc {
                color: #3BC9A9;
            }
        }

        .list_style3 {
            .priceDiv {
                color: #FF8D41;
            }

            .desc {
                color: #3BC9A9;
            }
        }

        .list_style4 {
            .priceDiv {
                color: #DE799B;
            }

            .desc {
                color: #e34949;
            }
        }
    }

    .home_main {
        width: 100%;
        height: 280px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        .Linechart-container {
            width: 60%;
            height: 100%;
            border-radius: 10px;
            background: #fff;
        }

        .Ychart {
            width: 39%;
            height: 100%;
            border-radius: 10px;
            background: #fff;
        }

    }

    .home_footer {
        width: 100%;
        height: 220px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 5px;
        margin-top: 10px;

        .footer_left {
            width: 33%;
            height: 100%;
        }

        .footer_content {
            width: 33%;
            height: 90%;
            border-right: solid 1px #B2B7C6;
            border-left: solid 1px #B2B7C6;
        }

        .footer_right {
            width: 33%;
            height: 100%;
        }
    }
}
</style>